<script setup lang="ts">
import { FileUpload } from "@/components/common/FileUpload";
import { clearNoNum, clearSuffix } from "@/utils/inupt";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";
import { ref, watch } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    acquisitionCompany: "",
    acquisitionFiles: "",
    acquisitionPrice: "",
    acquisitionDate: "",
    rewardLevel: "",
    firstInventor: "",
    firstInventorType: "",
    outId: undefined,
    patentName: "",
    patentType: "",
    patentee: "",
    score: undefined,
    patenteeList: [
      {
        patentee: ""
      }
    ],
    secondInventor: "",
    secondInventorType: ""
  }),
  allPatentList: null
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

watch(
  () => newFormInline.value.patenteeList,
  () => {
    let str = "";
    if (newFormInline.value.patenteeList.length > 0) {
      str = newFormInline.value.patenteeList
        .filter(v => v.patentee)
        .map(v => v.patentee)
        .join(",");
    }
    newFormInline.value.patentee = str;
  },
  { deep: true, immediate: true }
);

const patentChange = patentId => {
  let findData: any = {};
  if (patentId) {
    findData = props.allPatentList.find(v => v.id == patentId);
  }
  newFormInline.value.outId = findData.id || "";
  newFormInline.value.patentName = findData.patentName || "";
  newFormInline.value.patentType = findData.patentType || "";
  let tempList = [
    {
      patentee: ""
    }
  ];
  if (findData.patentee) {
    tempList = findData.patentee.split(",").map(v => {
      return { patentee: v };
    });
  }
  newFormInline.value.patenteeList = tempList;
  newFormInline.value.firstInventor = findData.firstInventor || "";
  newFormInline.value.firstInventorType = findData.firstInventorType || "";
  newFormInline.value.secondInventor = findData.secondInventor || "";
  newFormInline.value.secondInventorType = findData.secondInventorType || "";
};

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="125px"
    class="mr-12"
  >
    <div class="flex">
      <el-form-item label="专利名称" prop="patentName">
        <el-input
          v-model="newFormInline.patentName"
          placeholder="请输入"
          class="!w-[250px]"
        />
        <!-- <el-select
          v-model="newFormInline.outId"
          placeholder="请选择"
          clearable
          class="!w-[250px]"
          @change="patentChange"
        >
          <el-option
            v-for="item in props.allPatentList"
            :key="item.id"
            :label="item.patentName"
            :value="item.id"
          />
        </el-select> -->
      </el-form-item>
      <el-form-item label="专利类型" prop="patentType">
        <el-select
          v-model="newFormInline.patentType"
          placeholder="请选择"
          clearable
          class="!w-[250px]"
        >
          <el-option label="发明专利" value="发明专利" />
          <el-option label="实用新型专利" value="实用新型专利" />
          <el-option label="外观专利" value="外观专利" />
        </el-select>
      </el-form-item>
    </div>
    <el-form-item label="专利权人" prop="patentee">
      <div class="w-[250px]">
        <div
          v-for="(item, index) in newFormInline.patenteeList"
          :key="index"
          class="flex items-center"
          :class="
            index == newFormInline.patenteeList.length - 1 ? '' : 'mb-[15px]'
          "
        >
          <el-input
            v-model="item.patentee"
            class="mr-[10px] flex-1"
            clearable
            placeholder="请输入"
          />
          <IconifyIconOffline
            v-if="index != 0"
            class="text-red-500 text-lg cursor-pointer mr-[8px]"
            :icon="Delete"
            @click="newFormInline.patenteeList.splice(index, 1)"
          />
          <IconifyIconOffline
            class="cursor-pointer text-lg"
            :icon="AddFill"
            @click="newFormInline.patenteeList.push({ patentee: '' })"
          />
        </div>
      </div>
    </el-form-item>
    <div class="flex">
      <el-form-item label="第一发明人类型" prop="firstInventorType">
        <el-select
          v-model="newFormInline.firstInventorType"
          placeholder="请选择"
          clearable
          class="!w-[250px]"
        >
          <el-option label="学生" value="学生" />
          <el-option label="院内老师" value="院内老师" />
          <el-option label="其他人员" value="其他人员" />
        </el-select>
      </el-form-item>
      <el-form-item label="第一发明人" prop="firstInventor">
        <el-input
          v-model="newFormInline.firstInventor"
          placeholder="请输入"
          class="!w-[250px]"
        />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="受让企业" prop="acquisitionCompany">
        <el-input
          v-model="newFormInline.acquisitionCompany"
          placeholder="请输入"
          class="!w-[250px]"
        />
      </el-form-item>
      <el-form-item label="转让金额" prop="acquisitionPrice">
        <el-input
          v-model="newFormInline.acquisitionPrice"
          placeholder="请输入"
          class="!w-[250px]"
          @input="newFormInline.acquisitionPrice = clearNoNum($event)"
          @blur="
            newFormInline.acquisitionPrice = clearSuffix(
              newFormInline.acquisitionPrice
            )
          "
          ><template #suffix> 万元 </template></el-input
        >
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="转让合同签订日期" prop="acquisitionDate">
        <el-date-picker
          v-model="newFormInline.acquisitionDate"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
          class="!w-[250px]"
        />
      </el-form-item>
      <el-form-item label="转让合同" prop="acquisitionFiles">
        <FileUpload v-model="newFormInline.acquisitionFiles" :limit="15" />
      </el-form-item>
    </div>
    <el-form-item label="获取积分" prop="score">
      <el-input-number
        v-model="newFormInline.score"
        placeholder="请输入"
        class="!w-[200px]"
      />
    </el-form-item>
  </el-form>
</template>
